<template>
  <div id="line-chart"></div>
</template>
<script setup>
import * as echarts from "echarts";
import resize from "@/utils/resize";
import { getCurrentInstance } from "vue";
let myChart = shallowRef();
let num = 10;
let x = ref([
  "0时",
  "1时",
  "2时",
  "3时",
  "4时",
  "0时",
  "0时",
  "0时",
  "0时",
  "0时",
  "0时",
  "0时",
]);
let y1 = ref([3, 6, 8, 9, 335, 532, 532, 532, 53, 64, 13, 53, 53, 53]);
let y2 = ref([1, 35, 53, 6, 64, 32, 632, 63, 53, 67, 31, 76, 90, 53]);
let y3 = ref([12, 135, 533, 26, 164, 322, 32, 63, 53, 67, 131, 76, 90, 53]);
let bar_waste_name = ref([]);

let props = defineProps(["lineChange", "bar_waste_name"]);
watch(
  () => props.lineChange,
  () => {
    x.value = props.lineChange.x;
    y1.value = props.lineChange.y1;
    y2.value = props.lineChange.y2;
    y3.value = props.lineChange.y3;
    bar_waste_name.value = props.bar_waste_name;
    getServerData();
  },
  { deep: true }
);
onMounted(() => {
  myChart.value = echarts.init(document.getElementById("line-chart"));
  resize(myChart.value);
  // resize(myChart.value)
  getServerData();
});

let getServerData = () => {
  myChart.value.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
        snap: true, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
      },
      formatter: function (params) {
        let relVal = params[0]?.name + "<br>";
        for (var i = 0; i < params.length; i++) {
          relVal +=
            `<span style='display:inline-block;margin-right:4px;width:14px;height:14px;background-color:${
              params[i]?.seriesName == "昨日"
                ? "#FFDA1C"
                : params[i]?.seriesName == "当日"
                ? "#61C8FF"
                : ""
            };'></span>&nbsp;` +
            params[i]?.seriesName +
            ":&nbsp;" +
            params[i]?.value +
            "kwh" +
            "<br>";
        }

        return relVal; //负数取绝对值变正数
      },

      textStyle: {
        color: "#666", // 文字的颜色
        fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
        fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
        fontSize: "20", // 文字字体大小
        lineHeight: "50", // 行高
      },
    },

    grid: {
      top: "19%",
      left: "2%",
      right: "2%",
      bottom: "14%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      data: x.value,
      axisLabel: {
        color: "#FEFEFE",
        fontSize: 19,
        fontWeight: 400,
        interval: 1, //标签显示间隔
      },
      axisTick: {
        show: true, // 是否显示刻度线
        lineStyle: {
          color: "#0D3E67",
          width: 2, // 坐标轴线线宽
          type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#0D3E67",
          width: 2,
        },
      },
      splitLine: {
        show: false,
      },
    },
    title: {
      show: true, //是否显示标题，默认显示，可以不设置
      text: "(单位：kwh)", //图表标题文本内容
      textStyle: {
        //标题内容的样式
        color: "#fff", //京东红
        fontStyle: "normal", //主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
        fontWeight: "lighter", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
        fontFamily: "san-serif", //主题文字字体，默认微软雅黑
        fontSize: 20, //主题文字字体大小，默认为18px
      },
      padding: 5, //各个方向的内边距，默认是5，可以自行设置
      itemGap: 10, //主标题和副标题之间的距离，可自行设置
      right: "2%", //left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
      top: "4%", //left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
    },
    yAxis: [
      {
        show: true,
        type: "value",
        fontSize: 19,
        nameTextStyle: {
          color: "#666",
          fontSize: 19,
          padding: [0, 0, 0, 0],
        },
        axisLabel: {
          color: "#fff",
          fontSize: 18,
        },
        splitLine: {
          show: true, // 是否显示分割线
          lineStyle: {
            color: "#0D3E67",
            width: 2, // 分割线线宽
            type: "solid", // 分割线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },
        },
        axisLine: {
          show: false, // 是否显示坐标轴轴线
          lineStyle: {
            color: "#0D3E67", // 坐标轴线线的颜色
            width: "2", // 坐标轴线线宽
            type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },
        },
      },
    ],
    legend: {
      data: ["昨日", "当日"], //图例名称
      right: "42%", //调整图例位置
      icon: "rect",
      padding: 8, //图例内边距
      itemWidth: 19, //图例图形宽度
      itemGap: 80, //图例图形间距
      top: 10, //调整图例位置
      itemHeight: 19, //修改icon图形大小

      textStyle: {
        fontSize: 20, //图例文字大小
        color: "#FEFEFE",
      },
    },
    series: [
      {
        name: "昨日",
        type: "line",
        showSymbol: false, //是否显示symbol
        smooth: true,
        symbolSize: 8,
        itemStyle: {
          color: "#FFDA1C",
          borderWidth: 3,
        },

        data: y1.value,
      },
      {
        name: "当日",
        type: "line",
        showSymbol: false, //是否显示symbol
        smooth: true,
        symbolSize: 8,
        itemStyle: {
          color: "#61C8FF",
          borderWidth: 3,
        },

        data: y2.value,
      },
    ],
  });
};
</script>
<style lang="scss" scoped>
#line-chart {
  width: 100%;
  height: 332px;
}
</style>
